<template>
  <div>
    <!--头部信息-->
    <a-spin :spinning="headLoading">
      <a-row justify="space-between" style="margin-bottom: 16px">
        <a-col style="padding: 5px" v-bind="{xl: 20 }">
          <a-row>
            <a-col>
              <span class="titleTxt">订单编号：</span>
              <span v-if="!showChange" class="titleTxt">{{id}}</span>
              <a-input v-model:value="id" v-if="showChange" style="width: auto"/>
            </a-col>
            <a-col>
              <RedoOutlined style="margin-left: 10px;font-size: 18px;" @click="refresh"/>
              <a-button type="primary" style="margin-left: 10px" @click="changeId" v-if="!showChange">更换</a-button>
              <a-button type="primary" style="margin-left: 10px" @click="searchId" v-if="showChange">查询</a-button>
              <a-button type="primary" style="margin-left: 10px" @click="cancelId" v-if="showChange">取消</a-button>
            </a-col>
          </a-row>
        </a-col>
        <a-col style="padding: 5px">
<!--          <a-button type="primary" @click="refund">申请退款</a-button>-->
        </a-col>
      </a-row>
    </a-spin>
    <!--分割线-->
    <a-divider style="height: 1px; background-color: #797979"/>
    <!-- 订单基本信息 -->
    <a-descriptions :column="{ xs: 1, sm: 3, md: 4, lg: 4, xl: 5 }" style="margin-top:10px">
      <a-descriptions-item label="平台">{{headContent.platform}}</a-descriptions-item>
      <a-descriptions-item label="状态">{{headContent.orderStatus}}</a-descriptions-item>
      <a-descriptions-item label="币种">{{headContent.currency}}</a-descriptions-item>
      <a-descriptions-item label="订单金额">
        <span style="font-size: 18px; font-weight: 600;position: relative;top:60%;left:-20%">{{headContent.invoicedAmount}}</span>
      </a-descriptions-item>
      <a-descriptions-item label="退款金额">
        <span style="font-size: 18px; font-weight: 600;position: relative;top:60%;left:-20%">{{toDecimal(headContent.totalTaxRefund)}}</span>
      </a-descriptions-item>
      <a-descriptions-item label="下单时间">{{headContent.orderCreatedTime}}</a-descriptions-item>
      <a-descriptions-item label="下单邮箱">{{headContent.billingEmail}}</a-descriptions-item>
      <a-descriptions-item label="订单类型">{{headContent.orderType}}</a-descriptions-item>
    </a-descriptions>
    <!--分割线-->
    <a-divider style="height: 1px; background-color: #797979"/>
    <!-- tabs页 -->
    <a-tabs v-model:activeKey="activeKey" style="margin-top: 20px">
      <a-tab-pane key="1" tab="订单详情">
        <detail-tabs ref="detailRef" :orderId="id" :platform="headContent.platform"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="物流信息">
        <logistics-tabs ref="logisticsRef" :orderId="id" :platform="headContent.platform" @changeActiveKey="changeActiveKey"/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="售后信息">
        <after-service-tabs ref="afterServiceRef" :orderId="id" :platform="headContent.platform" :orderInvoicedAmount="headContent.invoicedAmount"/>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
export default {
  name: 'orderStandardization-orderDetail'
}
</script>
<script setup>
import {useRoute,useRouter} from "vue-router";
import {toDecimal} from "@/utils/utils.js"
import {ref, watch,onMounted,nextTick} from "vue";
import DetailTabs from "@/views/orderStandardization/components/detailTabs.vue";
import LogisticsTabs from "@/views/orderStandardization/components/logisticsTabs.vue";
import AfterServiceTabs from "@/views/orderStandardization/components/afterServiceTabs.vue";
import {getOrderDetail} from "@/api/standard/index.js";
import {message} from "ant-design-vue";
import {getManyDictItems} from "@/api/system/dict.js";
const router = useRouter()
const route = useRoute()
const options = ref([])
const id = ref(route.query.id)
const headLoading = ref(false)
const activeKey = ref('1')
const showChange = ref(false)
const tempId = ref('')
const headContent = ref({})
const detailRef = ref()
const layout = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 4,
  xxl: 4
}
const logisticsRef = ref()
const afterServiceRef = ref()

/**
 * 取消更改
 */
const cancelId = () => {
  id.value = tempId.value
  showChange.value = false
}

/**
 * 更换订单号
 */
const changeId = () => {
  tempId.value = id.value
  showChange.value = true
}
/**
 * 查询订单号
 */
const searchId = async () => {
  showChange.value = false
  await initHead()
  await initTabs()
}
/**
 * 刷新页面
 */
const refresh = async () => {
  //重新调一次页面接口
  await initHead()
  await initTabs()
}
/**
 * 初始化头部信息
 * @returns {Promise<void>}
 */
const initHead = async () => {
  try{
    headLoading.value = true
    id.value = id.value.trim()
    const res = await getOrderDetail({orderId: id.value})
    headContent.value = res.result
  }catch (e){
    console.log(e)
    message.error(e)
  }finally{
    headLoading.value = false
  }
}
/**
 * 初始化tabs页
 * @returns {Promise<void>}
 */
const initTabs = async () => {
  if(activeKey.value === '1'){
    await detailRef.value.init()
  }else if(activeKey.value === '2'){
    await logisticsRef.value.init()
  }else if(activeKey.value === '3'){
    await afterServiceRef.value.init()
  }
}

/**
 * 申请退款
 */
const refund = () => {
  router.push({path: '/orderStandardization/refund',query:{orderId:id.value}})
}
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"orderPlatform"
    })
    options.value = res.result.orderPlatform
  }catch (e){
    console.log(e)
  }
}

const changeActiveKey = async () => {
  activeKey.value = '3'
  await afterServiceRef.value.init()
}

onMounted(async ()=>{
  await initHead()
  await initTabs()
  await init()
})
/**
 * 监听activeKey变化
 */
watch(() => activeKey.value,(value)=>{
  nextTick(() => {
    initTabs()
  })
})
</script>
<style scoped>
.titleTxt{
  line-height: 33px;
  height: 33px;
  font-size: 18px;
  font-weight: 600;
}
.ant-divider-horizontal{
  margin: 0 !important;
}

</style>
